طراحی سایت

ساخت وبلاگ

آخرین مطالب

امکانات وب

مقدمه

امروز میخواهیم با تگ ها و جوانب html5 آشنا شویم. Html5 انقلابی در طراحی سایت ایجاد کرد در واقع این زبان نشانه گذاری نصبت به گذشته کاملاً مفهومی تر و سئو بیس تر میباشد. در html5 شما اجزاء مهم را از اجزاء معمولی جدا میکنید html5 نه تنها سئو سایت بلکه ظاهر و کارایی های سایت شما را نیز بالا می برد به طور مثال در  html5 به راحتی میتوان با قابلیت های خود html5 فیلم و صوت درج کرد. انیمیشن ساخت و کلی موارد دیگر که مفصل در مورد آنها صحبت میکنیم.

خوب حال برای کدنویسی با html5 در ابتدا باید قالب سایت طراحی شده باشد.

به طور مثال سایتی که من میخواهم کد نویسی آن را شروع کنم یک هدر، یک ساید بار، یک فوتر و یک بخش اصلی دارد. در گذشته برای طراحی اینگونه سایتی اجزاء تفاوت نداشتند و شما برای طراحی هر کدام می توانستید از اجزاء اصلی html استفاده کنید که بیشتر افراد از div استفاده میکردند اما در html5 اگر بخواهید به صورت استاندارد کد بنویسید باید از تگ های html5 استفاده کنید و اگر نه اجباری به این کار ندارید ولی در هرصورت چند تگ هستند که با آنها میتوانید اجزاء اصلی سایت را از یکدیگر جدا کنید.

  1. Header
  2. Footer
  3. Section
  4. هدر: این بخش سرصفحه سایت شما را در بر میگیرد.
  5. فوتر: این بخش پا صفحه شما را در بر میگیرد.
  6. سکشن: با این تگ میتوانید محتویات میانی سایت را دسته بندی کنید(به طور مثال سایدبار و کانتنت یا رپر سایت)

در مطالب گذشته سایت نمونه ای از وب سایت طراحی شده با HTML5 آمده است که میتوانید به آن مراجعه کنید.در اینجا نیز به ذکر مثالی ساده تر میپردازیم.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>اچ تی ام ال 5</title>

</head>

<body>

<header><h1>اچ تی ام ال 5</h1></header>

<section class="content">ساخت سایت به سادگی امکان پذیر نیست مگر با تمرین و تکرار</section>

<section class="sidebar"></section>

<footer><blockquote>ساخت سایت به سادگی امکان پذیر نیست مگر با تمرین و تکرار</blockquote></footer>

</body>

</html>

در کد های بالا از تگی به نام blockquote استفاده کرده ایم این تگ برای معرفی یک نقل قول می باشد.

در مطلب بعدی نحوه درج یک موزیک پلیر با استایل دلخواه میپردازیم.

طراحی سایت...
ما را در سایت طراحی سایت دنبال می کنید

برچسب : نویسنده : علی آخرتی web500 بازدید : 982 تاريخ : دوشنبه 28 مهر 1393 ساعت: 18:51

java

در طراحی بیشتر سایت ها عمیات های انجام شده یا بر سرور و یا بر سیستم کلاینت فشار می آورد برای اینکه بتوانیم این فشار را از روی کلاینت یا سرور برداریم باید عملیات های انجام شده را بین کلاینت و سرور تقسیم کنیم. که این کار امکان پذیر نمی باشد مگر با استفاده از جاوا اسکریپت.

شما باید بدانید که وب سایت طراحی شده باید متناسب با تمام مرورگرها باشد پس چه کار باید کرد

در اینجا ما از جدید ترین تکنولوژی و تگ ها استفاده میکنیم و در آخر با استفاده از کتابخانه modeization برای پیش بینی خروجی در مرورگر های قدیمی استفاده میکنیم. در ساخت سایت باید سرعت، دقت، و فراگیری آن را در نظر بگیریم و هیچکدام از موارد بالا را فدای دیگری نکنیم.

 

کتابخانه modeization، راه ساده ای است تا تشخیص دهیم مرورگر از چه تکنولوژی پشتیبانی نمیکند و برای هر تکنولوژی جدیدی که استفاده کرده ایم راه پیشگیری استفاده کنیم. با این کار نه تنها سئو سایت شما بلکه ظاهر آن نیز بهبود پیدا میکند.

 

تا اینجا هنوز شما یک سایت با ظاهر نسبتاً زیبا و سئو تقریباً مناسب طراحی کرده اید برای اینکه بتوانید از ربودن اطلاعات سایت جلوگیری کنید باید از کتابخانه ای به عنوان COWL استفاده کنید.

 

برای استفاده از این کتابخانه کافیست آن را در وب سایت خود لود کنید. و از این پس دیگر نگران طراحی یک سیستم امنیتی نباشید.

برای لود کردن این کتابخانه نیز میتوانید از تگ اسکریپت استفاده کنید.

مثال:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>exampel</title>

<script src="مسیر فایل"></script>

</head>

 

<body>

</body>

</html>

 

webGl: webGl یعنی طراحی سه بعدی در وب.در ساخت سایت برای استفاده از webGl نیاز به بارگزاری کتاب خانه، پرونده و... نداریم در واقع مرورگرهای جدید این کتابخانه را در خودشان تعبیه کرده اند.

در صفحاتی که از webGl استفاده میشود از یک زبان دیگر با نام GLSL ES باید استفاده کنید.

این زبان با جاوا اسکریپت ایجاد شده پس نیازی به یادگیری چیز تازه ای نیست و فقط کافیست از این تکنولوژی استفاده کنید.

var main=function() {

  var CANVAS=document.getElementById("your_canvas");

  CANVAS.width=window.innerWidth;

  CANVAS.height=window.innerHeight;

 

  /*========================= GET WEBGL CONTEXT ========================= */

  try {

    var GL = CANVAS.getContext("experimental-webgl", {antialias: true});

  } catch (e) {

    alert("You are not webgl compatible :(") ;

    retu false;

  } ;

 

  /*========================= SHADERS ========================= */

 

  var shader_vertex_source="\n\

attribute vec2 position; //the position of the point\n\

attribute vec3 color; //the color of the point\n\

varying vec3 vColor;\n\

void main(void) { //pre-built function\n\

gl_Position = vec4(position, 0., 1.); //0. is the z, and 1 is w\n\

vColor=color;\n\

}";

 

  var shader_fragment_source="\n\

precision mediump float;\n\

varying vec3 vColor;\n\

void main(void) {\n\

gl_FragColor = vec4(vColor, 1.);\n\

}";

 

  var get_shader=function(source, type, typeString) {

    var shader = GL.createShader(type);

    GL.shaderSource(shader, source);

    GL.compileShader(shader);

    if (!GL.getShaderParameter(shader, GL.COMPILE_STATUS)) {

      alert("ERROR IN "+typeString+ " SHADER : " + GL.getShaderInfoLog(shader));

      retu false;

    }

    retu shader;

  };

 

  var shader_vertex=get_shader(shader_vertex_source, GL.VERTEX_SHADER, "VERTEX");

  var shader_fragment=get_shader(shader_fragment_source, GL.FRAGMENT_SHADER, "FRAGMENT");

 

  var SHADER_PROGRAM=GL.createProgram();

  GL.attachShader(SHADER_PROGRAM, shader_vertex);

  GL.attachShader(SHADER_PROGRAM, shader_fragment);

 

  GL.linkProgram(SHADER_PROGRAM);

 

 

  var _color = GL.getAttribLocation(SHADER_PROGRAM, "color");

  var _position = GL.getAttribLocation(SHADER_PROGRAM, "position");

 

  GL.enableVertexAttribArray(_color);

  GL.enableVertexAttribArray(_position);

 

  GL.useProgram(SHADER_PROGRAM);

 

  /*========================= THE TRIANGLE ========================= */

  //POINTS :

  var triangle_vertex=[

    -1,-1, //first summit -> bottom left of the viewport

    0,0,1,

    1,-1, //bottom right of the viewport

    1,1,0,

    1,1,  //top right of the viewport

    1,0,0

  ];

 

  var TRIANGLE_VERTEX= GL.createBuffer ();

  GL.bindBuffer(GL.ARRAY_BUFFER, TRIANGLE_VERTEX);

  GL.bufferData(GL.ARRAY_BUFFER,

                new Float32Array(triangle_vertex),

    GL.STATIC_DRAW);

 

  //FACES :

  var triangle_faces = [0,1,2];

  var TRIANGLE_FACES= GL.createBuffer ();

  GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, TRIANGLE_FACES);

  GL.bufferData(GL.ELEMENT_ARRAY_BUFFER,

                new Uint16Array(triangle_faces),

    GL.STATIC_DRAW);

 

 

  /*========================= DRAWING ========================= */

  GL.clearColor(0.0, 0.0, 0.0, 0.0);

 

  var animate=function() {

 

    GL.viewport(0.0, 0.0, CANVAS.width, CANVAS.height);

    GL.clear(GL.COLOR_BUFFER_BIT);

    GL.vertexAttribPointer(_position, 2, GL.FLOAT, false,4*(2+3),0) ;

    GL.vertexAttribPointer(_color, 3, GL.FLOAT, false,4*(2+3),2*4) ;

    GL.bindBuffer(GL.ARRAY_BUFFER, TRIANGLE_VERTEX);

    GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, TRIANGLE_FACES);

    GL.drawElements(GL.TRIANGLES, 3, GL.UNSIGNED_SHORT, 0);

 

    GL.flush();

 

    window.requestAnimationFrame(animate);

  }

  animate();

}

طراحی سایت...
ما را در سایت طراحی سایت دنبال می کنید

برچسب : جاوا,آموزش جاوا,آموزش جاوا اسکریپت, نویسنده : علی آخرتی web500 بازدید : 1332 تاريخ : پنجشنبه 24 مهر 1393 ساعت: 13:15

html

در ابتدا برای طراحی یک وب سایت شما باید از نرم افزارهای ادیتور استفاده کنید که بنده از دو نرم افزار دریم ویور و ویژوال استدیو استفاده میکنم

دریم ویور برای نوشتن کدهای HTML و PHP

و نرم افزار ویژوال استدیو برای نوشتن کدهای جاوا و CSS

اما شما میتوانید از نرم افزار های دیگر نیز استفاده کنید در واقع نرم افزار مورد استفاده شما مهم نمی باشد این نحوه کد نویسی شماست که به کدهای شما روح میبخشد.

خوب در ابتدا از HTML شروع میکنیم.

HTML یک زبان نشانه گذاریست  من در مورد چگونگی کار با این زبان زیاد صحبت نمیکنم در واقع  آموزش های زیادی از این قبیل در وب سایت ها و وبلاگ های دیگر درج شده است. شما برای بهینه سازی و بهبود کدهای خود باید از استفاده از تگهای منسوخ شده صرف نظر کنید و از تیبل برای استایل صفحات خود استفاده نکنید.

استفاده از تگهای منسوخ شده باعث کاهش سئو سایت شما می شود.

تیبل سنگین ترین تگ HTML است و بارگزاری سایت شما را طولانی تر میکند.

 

نمونه ای از یک وب سایت طراحی شده در html5

<!DOCTYPE html>
<html lang=”en”>
<head>
        <meta charset=”utf-8”>
        <title>Awesome HTML5 Webpage</title>
        <meta name=”description” content=”An awesome HTML5 page YOU built from scratch!”>
        <meta name=”author” content=”Udemy”>
        <link rel=”stylesheet” href=”style.css”>
</head>
<body>
        <div id=”wrapper”>
                <header class=”main_headline”>
                        <nav>
                                <ul>
                                        <li><a href=”#”>About</a></li>
                                        <li><a href=”#”>Services</a></li>
                                        <li><a href=”#”>Products</a></li>
                                        <li><a href=”#”>Contact</a></li>
                                </ul>
                        </nav>
                        <h1>Super Duper Awesome Headline! </h1>
                </header>
                <div id=”primary_content”>
                        <section id=”left_column”>
                                <h3>A Hitchhiker’s Guide!</h3>
                                <p>To the Galaxy!</p>
                        </section>
 
                        <section id=”right_column”>
                                <article>
<header>
<h3>The Answer to Life?</h3>
<p>Published: 30 August 2013</p>
                                        </header>
                                        <p>Douglas Adams, when asked: “What is the answer to life, universe and everything”, replied:</p>
                                        <blockquote>”42”</blockquote>
                                </article>
                        </section>
                </div>
 
                <footer>
                        <p>The Footer is where all useless info goes!</p>
                </footer>
</div>
</body>
</html>

بهینه سازی کدها:

برای بهینه سازی کدها برای یک جستجوگر ما از میکرودیتا ها استفاده میکنیم .

در سال ۲۰۱۱ موتور های جستجو سایتی را به نام Schema.org معرفی کردند که خدماتی را برای بهبود وب سایت ها ارائه میدهد. این وب سایت خدماتی را برای معرفی بهتر محتوای سایت به جستجوگر ارائه میدهد. هنوز هم بیشتر مردم از این خدمات استفاده  نمیکنند.

شما میتوانید برای معرفی بهتر وب سایت خود از خاصیت های جدیدی که میتوانید به تگ های خود اختصاص بدهید استفاده کنید. این خاصیت ها که عبارتند از

ITEMSCOPE

ITEMTYPE

ITEMPROP

ITEMID

ITEMREF

به تگ های شما اضافه میشوند و اطلاعات شما را برای موتور جستجو دسته بندی میکنند.

به این اطلاعات میکرو دیتا میگویند.

میکرو دیتا ها انواعی از داده را پشتیبانی میکنند که ما پنج نوع را نام میبریم.

شخص

محصول

رویداد

سازمان

فیلم

کتاب

نقدو برسی

هر یک نسبت به نوع خود داده هایی را دریافت میکنند و شما باید با توجه به نوع داده خود، میکرو دیتا های مورد نظر را ست کنید.

 برای مثال در زیر ما یک کتاب را به جستجو گر معرفی کردیم.

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset=utf-8>

<title>Example Page With Microdata</title>

</head>

<body>

<section itemscope itemtype="http://schema.org/Book">

<h1 itemprop="name">Anything You Want</h1>

<span>Author: <span itemprop="author">Derek Sivers</span></span>

<span>Category : <span itemprop="genre">business</span></span>

<a href="http://sivers.org/ayw/"><span itemprop="detail">About the Book<span></a>

</section>

</body></html>

 

 
در روزهای آینده زبان های دیگر و نکات دیگری را برسی میکنیم
طراحی سایت...
ما را در سایت طراحی سایت دنبال می کنید

برچسب : html,طراحی سایت,نکته های قابل توجه در طراحی سایت, نویسنده : علی آخرتی web500 بازدید : 1520 تاريخ : يکشنبه 20 مهر 1393 ساعت: 19:12

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه